<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body style="height: 2000px;">
    <div id="app">
        <button @click="addChange" v-if="!add">添加任务</button>
        <div v-if="add"><input type="text" v-model="newTask"> <button @click="addTask">确定</button></div>
        <br>
        <div v-for="task in tasks" :key="task.taskid" style="float: left; margin-right: 20px; border: 1px solid red;">
            <div style="cursor: pointer; user-select: none;" @click="popTask($event,task.taskid)">X</div>
            <h1>{{task.taskDesc}}</h1>
            <div>
                <div style="float: left;">
                    <button v-if="task.status" style="background-color: green;">已完成</button>
                    <button v-else style="background-color: red;">未完成</button>
                </div>
                <div style="float: right;">
                    <button @click="setStatus($event,task.taskid)" v-if="task.status">任务未完成cry</button>
                    <button @click="setStatus($event,task.taskid)" v-else>确定已完成yes</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.onresize = function() {
            console.log(window.outerHeight);
            console.log(window.innerHeight);
        }
        var app = new Vue({
            el: "#app",
            data: {
                add: false,
                newTask: '',
                tasks: [{
                    taskid: 1,
                    taskDesc: "洗脸",
                    status: false
                }, {
                    taskid: 2,
                    taskDesc: "刷牙",
                    status: false
                }, {
                    taskid: 3,
                    taskDesc: "吃饭",
                    status: false
                }, {
                    taskid: 4,
                    taskDesc: "工作",
                    status: false
                }]
            },
            methods: {
                setStatus(e, id) {
                    console.log(id, id - 1);
                    this.tasks[id - 1].status = !this.tasks[id - 1].status;
                    console.log(e.target);
                },
                popTask(e, id) {
                    this.tasks = this.tasks.filter(task => task.taskid != id)
                },
                addChange() {
                    this.add = true
                },
                addTask() {
                    let obj = {}
                    obj.taskid = this.tasks[this.tasks.length - 1].taskid + 1;
                    obj.taskDesc = this.newTask;
                    obj.status = false;
                    this.tasks.push(obj)
                    this.add = false
                }
            }
        })
    </script>
</body>

</html>